<!-- 表格分页 -->

<template>
  <el-pagination
    v-bind="config"
    :class="pageClass"
    :current-page.sync="state.param.page"
    :page-size.sync="state.param[CORE.MAP.PAGE_SIZE]"
    @current-change="pageChange"
    @size-change="sizeChange"
  >
    <div v-if="hasSlot" :class="`${className}-slot`">
      <slot />
    </div>
  </el-pagination>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../../mixPath'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'TablePage',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixPath],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB.WebTable,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 分页配置项
     */
    config() {
      const { elPageProps, elPageMiniProps, miniPage, state } = this
      return {
        ...(miniPage ? elPageMiniProps : elPageProps),
        small: miniPage,
        total: state.total,
      }
    },

    /**
     * 参数对象
     */
    obj() {
      const { param, state } = this
      if (param) return param
      return state.param || { idList: [], rowList: [] }
    },

    /**
     * 分页样式类
     */
    pageClass() {
      const { className, state: { total }, obj } = this
      const pageSize = obj[CORE.MAP.PAGE_SIZE]
      const pageCount = Math.ceil(total / pageSize)
      return `${className} ${className}-${pageCount}`
    },

    /**
     * 是否有插槽
     */
    hasSlot() {
      return !!this.$scopedSlots
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 当前页码切换
     */
    pageChange() {
      const { state, commit, onPage } = this

      if (onPage) onPage()
      else commit(state.MAIN_START || 'startList')
    },

    /**
     * 分页大小切换
     */
    async sizeChange(size) {
      const { $nextTick, obj, state, commit, onPageSize } = this
      await $nextTick()

      // 回到首页
      Object.assign(obj, { page: 1, [CORE.MAP.PAGE_SIZE]: size })

      // 打开列表开关
      if (onPageSize) onPageSize()
      else commit(state.MAIN_START || 'startList')
    },
  },
}
</script>
